<template>
  <div>
    <!-- 顶部 -->
    <navbar title="登陆/注册" icon="cross" />
    <!-- 表单 -->
    <van-form>
      <van-field
        v-model="user.mobile"
        name="手机号"
        placeholder="手机号"
        left-icon="friends"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <van-field
        v-model="user.code"
        name="验证码"
        placeholder="验证码"
        left-icon="lock"
        :rules="[{ required: true, message: '请填写验证码' }]"
      >
        <template #button>
          <van-button size="small" disabled v-if="isSend == true">
            <van-count-down
              :time="1000 * 10"
              format="sss"
              @finish="isSend = false"
            ></van-count-down>
          </van-button>
          <van-button size="small" type="primary" v-else @click="sendCode"
            >发送验证码</van-button
          >
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button block type="primary" @click="login">登陆</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import navbar from "../common/navbar";
//导入登陆的方法
import { login } from "@/api/user";
export default {
  name: "login",
  components: {
    navbar
  },
  data() {
    return {
      user: {
        mobile: "",
        code: ""
      },
      isSend: false
    };
  },
  mounted() {},
  methods: {
    //定义登陆的方法
    // async login() {
    //     //成功的时候调用的代码
    //   try {
    //     let data = await login(this.user);
    //     console.log(data);
    //   } catch (error) {
    //        //失败的时候调用的代码
    //     console.log(error.response);
    //   }
    // },
    login() {
      //判断手机号或者验证码
      //手机号的正则
      var phone_pertten = /^1[34578]\d{9}$/;
      var code_pertten = /^\d{6}$/;
      //判断手机号或者验证码是否为空
      if (this.user.mobile == "" || this.user.code == "") {
        this.$toast.fail("手机号或者验证码不能为空");
        return false;
      }
      //手机格式校验失败的时候
      if (!phone_pertten.test(this.user.mobile)) {
        this.$toast.fail("手机格式不正确");
        return false;
      }
      //验证码格式错误
      if (!code_pertten.test(this.user.code)) {
        this.$toast.fail("验证码格式不正确");
        return false;
      }
      //请求登陆的接口
      this.$axios
        .post("/authorizations", this.user)
        .then(res => {
          console.log(res);
          //把用户登陆的基本信息存入vuex中
          this.$store.commit("login", res.data);
          this.$toast.success("登陆成功");
          let url = this.$route.query.redirect || "/my";
          this.$router.replace(url)
        })
        .catch(error => {
          console.log(error.response.data.message);
          this.$toast.fail("请求登陆接口信息失败");
        });
    },
    sendCode() {
      var phone_pertten = /^1[34578]\d{9}$/;
      //判断手机号或者验证码是否为空
      if (this.user.mobile == "") {
        this.$toast.fail("手机号不能为空");
        return false;
      }
      //手机格式校验失败的时候
      if (!phone_pertten.test(this.user.mobile)) {
        this.$toast.fail("手机格式不正确");
        return false;
      }
      //修改发送的状态
      this.isSend = true;
      //请求发送验证码的接口信息
      this.$axios
        .post("/sms/codes/" + this.user.mobile)
        .then(res => {
          console.log(res);
          this.$toast.success("发送验证码成功");
        })
        .catch(error => {
          console.log(error.response.data.message);
          this.$toast.fail("请求登陆接口信息失败");
        });
    }
  }
};
</script>
<style lang="scss" scoped>
</style>